<template>
  <div class="flow-node-box">
    <div 
      style="display: flex"
      v-for="(item, index) in flowNodeList"
      :key="item.orderNum"
    >
      <div class="flow-item">
        <div 
          class="flow-item-hd"
          :class="
            item.orderNum == status && status < 3 ? 
            'danger flicker allowed' : 'info ban'
          "
          @click="openDialog(item.orderNum == status && status < 3)"
        >
          <div class="flow-item-in">
            <el-icon 
              v-if="item.orderNum < status || status == '3'" 
              class="el-icon-success"
            >
              <SuccessFilled />
            </el-icon>
          </div>
        </div>
        <div class="flow-item-text">{{ item.flowNodeName }}</div>
      </div>

      <div 
        class="line" 
        :class="item.orderNum < status ? 'line-success' : 'line-info'"
        v-if="index != flowNodeList.length - 1"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { SuccessFilled } from '@element-plus/icons-vue'

const props = defineProps({
  node: {
    type: String,
    default: '2'
  },
  currentRow: {
    type: Object,
    default: () => ({})
  }
})

const emits = defineEmits(['custom-event'])

const flowNodeList = [
  { orderNum: '1', flowNodeName: '开始' },
  { orderNum: '2', flowNodeName: '资管部门提交' },
  { orderNum: '3', flowNodeName: '风控部审核归档' },
]

const status = computed(() => {
  if(typeof props.node === 'object') return;
  let nodeList = props.node.split(','),
      len = nodeList.length - 1;

  if(nodeList[len] === '0') return nodeList[len - 1];

  return nodeList[len];
})

const openDialog = (flag) => {
  if(!flag) return
  emits('custom-event', props.currentRow)
}
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.flow-node-box {
  width: 100%;
  display: flex;
  justify-content: center;

  .flow-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .flow-item-hd {
      position: relative;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      padding: 5px;
      // cursor: pointer;

      .flow-item-in {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #fff;

        .el-icon-success {
          position: absolute;
          color: #67C23A;
          line-height: 25px;
          font-size: 29px;
          top: -2px;
          left: -2px;
        }

        .gray {
          position: absolute;
          color: #909399;
          line-height: 30px;
          font-size: 34px;
          top: -2px;
          left: -2px;
        }
      }
    }

    .info {
      color: #FFF;
      background-color: #909399;
      border-color: #909399;
    }

    .success{
      color: #FFF;
      background-color: #67C23A;
      border-color: #67C23A;
    }

    .danger{
      color: #FFF;
      background: linear-gradient(to right, #409EFF, #a0cfff);
      border-color: #409EFF;
    }

    .flicker {
      animation: flicker 1s linear 0s infinite normal !important;
    }

    @keyframes flicker {
      0% {
        transform: rotate(0deg);
      }
      
      100% {
        transform: rotate(360deg);
      }
    }
  }

  .line {
    position: relative;
    width: 20px;
    height: 2px;
    margin-top: 13px;
  }

  .line::after {
    content: '';
    position: absolute;
    top: -5px;
    right: -12px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 10px solid transparent;
  }

  .line-info {
    border: 1px solid #909399;
    background-color: #909399;
  }

  .line-info::after {
    border-left: 10px solid #909399;
  }

  .line-success {
    border: 1px solid #67C23A;
    background-color: #67C23A;
  }

  .line-success::after {
    border-left: 10px solid #67C23A;
  }
}

.allowed {
  cursor: pointer;
}
.ban {
  cursor: not-allowed;
}
</style>